.modalContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    transition: background-color 0.2s linear, opacity 0.2s linear;
    opacity: 0;
    pointer-events: none;

    &.showModal {
        opacity: 1;
        pointer-events: auto;
        backdrop-filter: blur(10px);
    }

    .modal {
        display: flex;
        flex-direction: column;
        padding: 1rem clamp(0.25rem, 0.25rem + 4vw, 1.5rem);
        border-radius: 3px;
        background: var(--light-gray-lighter);
        transition: transform 1s linear, opacity 0.2s linear;
        transform: rotateY(90deg);
        opacity: 0;

        &.scaleUpModal {
            transform: rotateY(0deg);
            opacity: 1;
            transition: transform 0.4s linear, opacity 1s ease-out;
        }

        .modalHeader {
            display: flex;
            justify-content: end;
            width: 100%;
        }

        .headText {
            color: var(--sailor-blue);
            font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
            margin-bottom: 2rem;
            text-align: center;
            font-weight: bold;
        }
    }
}